<template>
  <div>
    <!-- 系列配置 -->
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
    />
    <table-box
      ref="seriesConfig"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :other-raw="otherRaw"
      :off-set="-20"
      show-index
      show-selection
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    />
    <div>
      <import-files v-if="importVisible" title="导入" :visible.sync="importVisible" :config="fileImportConfig" @success="handleImportSuccess" />
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />
    </div>
    <div>
      <edit-dialog v-if="showAddPage" ref="editdlg" :visible.sync="showAddPage" :detail-data="activatedData" @success="refreshTable" />
    </div>
  </div>
</template>

<script>
import { changeSeriesState } from '@/api/basicData'
import editDialog from './component/EditDialog.vue'
// import store from '@/store'
export default {
  name: 'SeriesConfig',
  components: { editDialog },
  data() {
    return {
      exportVisible: false,
      importVisible: false,
      showAddPage: false,
      activatedData: {},
      searchConfig: [
        { label: '系列名称', prop: 'seriesName', type: 'text', value: '', placeholder: '' },
        {
          label: '所属专区',
          prop: 'styleCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `/select-service/api/v1/productStyle/page`,
            // paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属专区',
            interfacePath: `/select-service/api/v1/productStyle/page`,
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '系列类型',
          prop: 'typeCode',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/CONFIG_SERIES_TYPE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '所属专区',
          prop: 'bigStyleCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
            defaultProps: {
              label: 'styleName',
              value: 'styleCode'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属专区',
            interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
            setting: [{ prop: 'styleCode', title: '编码' }, { prop: 'styleName', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '所属区域',
          prop: 'areaCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `${process.env.VUE_APP_BASE_API}/api/v1/configArea/page`,
            // paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'areaName',
              value: 'areaCode'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属区域',
            interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configArea/page`,
            setting: [{ prop: 'areaCode', title: '编码' }, { prop: 'areaName', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '是否参与推广',
          prop: 'isPartakeSpread',
          type: 'select',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/BOOLEANS?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }
      ],
      tableSelected: [],
      otherRaw: {},
      otherFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configSeries/page`,
        hideSearchBar: true,
        sort: 'seriesCode',
        order: 'ASC',
        setting: [
          {
            prop: 'seriesCode',
            label: '系列编码',
            minWidth: '100'
          },
          {
            prop: 'seriesName',
            label: '系列名称',
            minWidth: '100'
          },
          {
            prop: 'styleName',
            label: '所属专区',
            minWidth: '100'
          },
          {
            prop: 'typeName',
            label: '系列类型',
            minWidth: '100'
          },
          {
            prop: 'bigStyleName',
            label: '所属专区',
            minWidth: '100'
          },
          {
            prop: 'areaName',
            label: '所属区域',
            minWidth: '100'
          },
          {
            prop: 'collocationName',
            label: '搭配系列',
            minWidth: '100'
          },
          {
            prop: 'standardColor',
            label: '系列标配色',
            minWidth: '100'
          },
          {
            prop: 'material',
            label: '材质',
            minWidth: '100'
          },
          {
            prop: 'marketPosition',
            label: '市场定位',
            minWidth: '100',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'MARKET_POSITION'
            }
          },
          {
            prop: 'sampleCode',
            label: '样品编码',
            minWidth: '100'
          },
          {
            prop: 'styleForm',
            label: '款式形态',
            minWidth: '100',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'STYLE_FORM'
            }
          },
          {
            prop: 'isPartakeSpread',
            label: '是否参与推广',
            minWidth: '100',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'recommendLevel',
            label: '系列推荐级别',
            minWidth: '100',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'RECOMMEND_LEVEL'
            }
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: '100',
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            }
          }
        ],
        btnList: this.isProduction ? null : [
          {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          },
          {
            buttonName: '参与推广',
            optCode: 'extend',
            outerFlag: true
          },
          {
            buttonName: '不参与推广',
            optCode: 'unextend',
            outerFlag: true
          },
          {
            buttonName: '导入',
            optCode: 'import',
            outerFlag: true
          },
          {
            buttonName: '导出',
            optCode: 'export',
            outerFlag: true
          }]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '系列配置',
        dataApi: '/slm-admin/api/v1/configSeries/export?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    },
    fileImportConfig() {
      return [{
        code: 'import',
        name: '系列配置',
        apiUrl: '/slm-admin/api/v1/configSeries/importExcel?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters
      }]
    }
  },
  created() {
  },
  methods: {
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.seriesConfig.initTableData()
      })
    },
    // 选中行
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 按钮组
    btnOperate(flag) {
      switch (flag) {
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', false)) {
            return
          }
          this.handleEdit(this.tableSelected)
          break
        case 'extend':
          this.handleChangeStatus(1)
          break
        case 'unextend':
          this.handleChangeStatus(0)
          break
        case 'export':// 导出
          this.exportVisible = true
          break
        case 'import':// 导入
          this.importVisible = true
          break
        default:
          break
      }
    },
    // 导入成功
    handleImportSuccess() {
      this.$nextTick(() => {
        this.refreshTable()
      })
    },
    // 编辑
    handleEdit(data) {
      if (data) {
        if (data.length > 1) {
          this.$message.warning('该操作仅可单选')
          return
        }
        this.activatedData = data[0]
      }
      this.showAddPage = true
    },
    // 是否参与推广
    handleChangeStatus(state) {
      if (!this.tableSelected.length) {
        this.$message.warning(`请选择【${state ? '参与推广' : '不参与推广'}】项`)
        return
      }
      const tmpArr = this.tableSelected.filter(row => row.isPartakeSpread === state)
      if (tmpArr.length > 0) {
        this.$message.warning(`当前所选分类包含${state ? '参与推广' : '不参与推广'}状态，请勿重复操作`)
        return
      }
      const disabledList = this.tableSelected.filter(row => (row.enable === 0 || row.enable === '0'))
      if (disabledList.length > 0) {
        const msgArr = disabledList.map(item => item.seriesName)
        this.$message.warning(`所选系列${msgArr.toString()}为停用状态，不可参与推广`)
        return
      }
      this.$confirm(`此操作将当前所选数据${state ? '参与推广' : '不参与推广'},是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableSelected.forEach(item => {
          item.isPartakeSpread = state
        })
        changeSeriesState(this.tableSelected).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '操作成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      })
    },
    refreshTable(isInit) {
      this.$refs.seriesConfig.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
